<template>
  <div>
    <h1>翻译</h1>
    <el-button @click="locale = 'zh'">中文</el-button>
    <el-button @click="locale = 'en'">En</el-button>
    <!-- 使用函数进行翻译,希望传入一个标记,就可以根据当前的语言设定,返回最终翻译的结果 -->
    <div>{{ t('sayHi') }}</div>
    <div>{{ t('zaoan') }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 1.记录当前的语言设定
      locale: 'zh',
      // 2.准备翻译的信息
      messages: {
        zh: {
          sayHi: '你好',
          zaoan: '早安管理员'
        },
        en: {
          sayHi: 'Hello',
          zaoan: 'Good Morning'
        }
      }
    }
  },
  methods: {
    t(val) {
      console.log(val)
      // 1.取出字典
      const zidian = this.messages[this.locale]
      // 2.返回翻译
      return zidian[val]
    }
  }
}
</script>

<style>

</style>
